<template>
    <div @mouseover="emit('update:show', true)" @mouseleave="emit('update:show', false)" :style="{
        '--qd-bar-height': show ? '0px' : '1000px'
    }" class="hidden sm:block absolute bottom-0 z-[42]! block w-full translate-y-[calc(100%-var(--qd-bar-height))] overflow-x-hidden lg:pb-20"
        data-v-68578b63="">
        <div class="bg-white hidden" :class="{
            'block!': type === 0,
        }">
            <div class="flex w-full flex-col items-center bg-light-gray shadow-2xl">
                <div
                    class="flex flex-row justify-center gap-8 px-28 py-6 lg:py-12 xl:px-28 2xl:max-w-[1260px] 2xl:px-12">
                    <div class="flex flex-col gap-3">
                        <div
                            class="group flex w-[180px] flex-row items-center justify-between py-[8px] pr-[14px] text-black transition-all cursor-default bg-blue/5 pl-[18px] text-blue">
                            <p
                                class="text-black! text-base font-figtree antialiased font-medium !m-0 transition-all duration-200">
                                菜单1
                            </p><svg width="6" height="12" viewBox="0 0 6 12" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M1 11L5 6L1 1" stroke="#2D5D9F"></path>
                            </svg>
                        </div>
                        <div
                            class="group flex w-[180px] flex-row items-center justify-between py-[8px] pr-[14px] text-black transition-all pl-[8px] hover:cursor-pointer">
                            <p
                                class="text-black! text-base font-figtree antialiased font-medium !m-0 transition-all duration-200 group-hover:text-blue">
                                菜单2
                            </p>
                        </div>
                        <div
                            class="group flex w-[180px] flex-row items-center justify-between py-[8px] pr-[14px] text-black transition-all pl-[8px] hover:cursor-pointer">
                            <p
                                class="text-black! text-base font-figtree antialiased font-medium !m-0 transition-all duration-200 group-hover:text-blue">
                                菜单3
                            </p>
                        </div>
                        <div
                            class="group flex w-[180px] flex-row items-center justify-between py-[8px] pr-[14px] text-black transition-all pl-[8px] hover:cursor-pointer">
                            <p
                                class="text-black! text-base font-figtree antialiased font-medium !m-0 transition-all duration-200 group-hover:text-blue">
                                菜单4
                            </p>
                        </div>
                    </div>
                    <div class="flex flex-1 flex-col gap-6">
                        <div class="grid grid-cols-3 gap-[12px] xl:grid-cols-4 xl:gap-[24px]">
                            <a href="/custom-patches/"
                                class="group flex flex-col items-center gap-1 bg-white text-center col-span-1"
                                v-for="value in 6" :key="value">
                                <div class="relative h-[190px] overflow-hidden w-[190px]">
                                    <div
                                        class="text-black! img relative w-full h-full transition-all duration-200 ease-out group-hover:scale-105">
                                        <div class="text-black! img-bg-gradient absolute inset-0 hidden">
                                            <div class="text-black! img-bg-gradient-inner h-full w-full bg-gradient-to-br from-[rgb(205,204,203)] to-[rgb(249,249,248)]"
                                                style="max-width: 190px;"></div>
                                        </div>
                                        <div class="image-content relative h-full">
                                            <div class="absolute inset-0">
                                                <div class="glow1 mx-auto mt-auto h-auto" style="max-width: 190px;">
                                                </div>
                                            </div>
                                            <div class="absolute inset-0 flex items-end justify-end">
                                                <div class="glow2 mx-auto mt-auto h-auto" style="max-width: 190px;">
                                                </div>
                                            </div><img alt="image" sizes="0vw"
                                                src="https://nicecustomize.oss-us-west-1.aliyuncs.com/img/7115a8d1d0a671206afccd46d543b018f6f0cba0.webp"
                                                width="190px" height="190px" class="h-full w-full object-cover"
                                                fetchpriority="auto" loading="lazy">
                                        </div>
                                    </div>
                                </div>
                                <div class="py-[10px]">
                                    <p
                                        class="text-black! text-base font-figtree antialiased font-medium !m-0 max-w-[180px] transition-all duration-200 group-hover:text-blue">
                                        产品
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="flex justify-end"><a href="/product-catalog/"
                                class="text-black! link-wrapper group transition-all duration-300 hover:cursor-pointer">
                                <div class="flex flex-row gap-2">
                                    <p
                                        class="text-black! text-base font-figtree antialiased font-medium !m-0 text-blue transition-all duration-200 group-hover:text-black">
                                        All Products </p>
                                </div>
                            </a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white max-w-[180px] hidden" :class="{
            'block!': type === 1,
        }" :style="{
            transform: `translateX(${lefts?.[0] ?? 0}px)`
        }">
            <div
                class="flex flex-col bg-light-gray px-4 py-4 shadow-[5px_10px_30px_rgba(48,59,75,0.06)] hover:cursor-pointer">
                <div class="group px-1.5 py-2" v-for="(item, index) in 3" :key="index">
                    <a href="/case-studies/" class="text-black! link-wrapper">
                        <p
                            class="text-black! text-sm font-figtree antialiased font-medium transition-all duration-200  hover:text-blue!">
                            Case Studies
                        </p>
                    </a>
                </div>
            </div>
        </div>
        <div class="bg-white max-w-[180px] hidden" :class="{
            'block!': type === 2,
        }" :style="{
            transform: `translateX(${lefts?.[1] ?? 0}px)`
        }">
            <div
                class="flex flex-col bg-light-gray px-4 py-4 shadow-[5px_10px_30px_rgba(48,59,75,0.06)] hover:cursor-pointer">
                <div class="group px-1.5 py-2" v-for="(item, index) in 3" :key="index">
                    <a href="/case-studies/" class="text-black link-wrapper">
                        <p
                            class="text-black text-sm font-figtree antialiased font-medium transition-all duration-200 hover:text-blue!">
                            Case Studies
                        </p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { watchEffect } from 'vue';

const props = withDefaults(defineProps<{
    show: boolean;
    type?: number;
    lefts?: number[];
}>(), {
    show: false,
    type: 0,
    lefts: () => []
})
const emit = defineEmits<{
    (e: 'update:show', show: boolean): void
}>()
watchEffect(() => {
    console.log('=======>', props.lefts)
})
</script>
